Vue.component("plant-header", {
    // #模板id，表示通过Html的template标签来定义模板
    template: "#plant-header",
    data() {
        return {
            listData: [
                "学院新闻",
                "党建动态",
                "通知公告",
                "分院动态"
            ],
            index: 0
        }
    },
    methods: {
        // 处理点击事件
        handleClick(idx) {
            // 触发自定义事件，将idx传给父组件
            // 参数一：事件名
            // 参数二：传递的数据（可以是任意数据类型）
            this.index = idx;
            this.$emit("change-idx",idx);
        }
    }
});

Vue.component("left-swiper", {
    // #模板id，表示通过Html的template标签来定义模板
    template: "#left-swiper",
    // props: ["images"],
    props: {
        images: {
            type: Array,
            required: true
        }
    },
    data() {
        let i = -2;

        setInterval(() => {
            let value = this.transform;
            if (value <= -1200) {
                i = 2;
            } else if (value >= 0) {
                i = -2;
            }
            value += i;
            this.transform = value;
        }, 1);

        return {
            transform: 0
        }
    }
});

Vue.component("left-list", {
    // #模板id，表示通过Html的template标签来定义模板
    template: "#left-list",
    // props: ["listData"],
    // 验证的好处：代码更严谨，阅读的代码的时候，更加清晰
    // 如果违背了参数校验的规则，vue会在控制台打印错误，然后继续执行代码
    props: {
        listData: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
        }
    }
})